<apes-header>
  <apes-button-list class="buttonList" [ctx]="ctx" [buttonBarMetadata]="buttonBar"
                    (click)="onEvent($event)"></apes-button-list>
</apes-header>
<!-- 采购开单监控 -->
<apes-content>
  <!--<apes-card [apesBordered]="false">-->
  <!-- 查询条件(固定) -->
  <!--<div class="boxShowFlex">-->
  <!--&lt;!&ndash; 要货时间 &ndash;&gt;-->
  <!--<div apes-col apesSpan="8">-->
  <!--<div>-->
  <!--<span>要货时间</span>-->
  <!--<div class="boxDiv">-->
  <!--<apes-range-picker [(ngModel)]='mdjcTime' [apesFormat]="'yyyy-MM-dd'"></apes-range-picker>-->
  <!--</div>-->
  <!--</div>-->
  <!--&lt;!&ndash;<p [ngStyle]="{ display: hind }"><i class="anticon anticon-exclamation-circle-o"></i> 必填！最大时间为一个月 </p>&ndash;&gt;-->
  <!--</div>-->
  <!--&lt;!&ndash; 询价区域 &ndash;&gt;-->
  <!--<div apes-col apesSpan="8">-->
  <!--<span>询价区域</span>-->
  <!--<ng-select style="width: 240px; display: inline-block;"-->
  <!--clearAllText-->
  <!--[items]="inquiry"-->
  <!--bindLabel="BJZ"-->
  <!--bindValue="BJZ"-->
  <!--[placeholder]="'选填'" [notFoundText]="'无法找到'" typeToSearchText [(ngModel)]="inquiryID">-->
  <!--</ng-select>-->
  <!--</div>-->
  <!--&lt;!&ndash; 车牌号码 &ndash;&gt;-->
  <!--<div apes-col apesSpan="8">-->
  <!--<span>车牌号码</span>-->
  <!--<input type="text" apes-input placeholder="请输入车牌号码" [(ngModel)]="carNum" style="width: 240px;">-->
  <!--</div>-->
  <!--&lt;!&ndash; 门店 &ndash;&gt;-->
  <!--<div apes-col apesSpan="8">-->
  <!--<span>门店</span>-->
  <!--<ng-select style="width: 240px; display: inline-block;"-->
  <!--[items]="store"-->
  <!--bindLabel="MDMC"-->
  <!--bindValue="MDID"-->
  <!--clearAllText [placeholder]="'选填'" [(ngModel)]="storeID" [notFoundText]="'无法找到'" typeToSearchText>-->
  <!--</ng-select>-->
  <!--</div>-->
  <!--&lt;!&ndash; 销售组 &ndash;&gt;-->
  <!--<div apes-col apesSpan="8">-->
  <!--<span>销售组</span>-->
  <!--<ng-select style="width: 240px; display: inline-block;"-->
  <!--typeToSearchText-->
  <!--[items]="sale"-->
  <!--multiple="true"-->
  <!--bindLabel="XSZMC"-->
  <!--bindValue="XSZID"-->
  <!--placeholder="选填，可多选"-->
  <!--[(ngModel)]="saleID"-->
  <!--[notFoundText]="'无法找到'">-->
  <!--</ng-select>-->
  <!--</div>-->
  <!--&lt;!&ndash; 状态 &ndash;&gt;-->
  <!--<div apes-col apesSpan="8" style="text-align: center">-->
  <!--<label apes-col apesSpan="6" apes-checkbox disabled [(ngModel)]="checkOne">未配货</label>-->
  <!--<label apes-col apesSpan="6" apes-checkbox [(ngModel)]="checkTwo">已超时</label>-->
  <!--<label apes-col apesSpan="6" apes-checkbox [(ngModel)]="checkThree">未询价要货</label>-->
  <!--</div>-->
  <!--</div>-->

  <!--&lt;!&ndash;查询条件（外加） &ndash;&gt;-->
  <!--<div class="boxShow" apes-row apesGutter="24" apesSpan="16" [ngStyle]="{ display: show }">-->

  <!--</div>-->

  <!-- 显示内容 -->
  <!--<div apes-row apesGutter="24" apesSpan="16">-->

  <!--&lt;!&ndash; 左侧 数据展示 &ndash;&gt;-->
  <!--<div>-->
  <!--<ag-grid-angular #grid-->
  <!--style="width: 100%;" [ngStyle]="{ height: height }" class="ag-theme-balham"-->
  <!--enableColResize="true"-->
  <!--enableSorting="true"-->
  <!--enableFilter="true"-->

  <!--suppressLoadingOverlay="true"-->

  <!--[rowData]="rowData"-->
  <!--[gridOptions]="gridOptions"-->
  <!--[columnDefs]="columnDefs"-->
  <!--[pinnedBottomRowData]="pinnedBottomRowData"-->
  <!--[rowClassRules]="rowClassRules">-->
  <!--</ag-grid-angular>-->
  <!--</div>-->
  <!--</div>-->
  <!--</apes-card>-->

  <div apes-row [apesGutter]="8" style="margin: 0px;">
    <div apes-col [apesMd]="24" style="padding: 0px;">

      <apes-card [apesTitle]="'查询条件'">
        <div apes-row style="padding:8px 8px 20px;">

          <!-- 要货时间 -->
          <div apes-col apesSpan="8" class="bi-col">
            <div apes-row>
              <label apes-col apesSpan="8" style="text-align: right">
                <span>要货时间</span>
              </label>
              <div apes-col apesSpan="16" class="boxDiv">
                <apes-range-picker [(ngModel)]='mdjcTime' [apesFormat]="'yyyy-MM-dd'"></apes-range-picker>
              </div>
            </div>
          </div>

          <!-- 询价区域 -->
          <div apes-col apesSpan="8" class="bi-col">
            <div apes-row>
              <label apes-col apesSpan="8" style="text-align: right">
                <span>询价区域</span>
              </label>
              <div apes-col apesSpan="16">
                <ng-select style="width: 240px; display: inline-block;"
                           clearAllText
                           [items]="inquiry"
                           bindLabel="BJZ"
                           bindValue="BJZ"
                           [placeholder]="'选填'" [notFoundText]="'无法找到'" typeToSearchText [(ngModel)]="inquiryID">
                </ng-select>
              </div>
            </div>
          </div>

          <!-- 车牌号码 -->
          <div apes-col apesSpan="8" class="bi-col">
            <div apes-row>
              <label apes-col apesSpan="8" style="text-align: right">
                <span>车牌</span>
              </label>
              <div apes-col apesSpan="16">
                <input type="text" apes-input placeholder="请输入车牌号码" [(ngModel)]="carNum" style="width: 240px;">
              </div>
            </div>
          </div>

          <!-- 门店 -->
          <div apes-col apesSpan="8" class="bi-col">
            <div apes-row>
              <label apes-col apesSpan="8" style="text-align: right">
                <span>门店</span>
              </label>
              <div apes-col apesSpan="16">
                <ng-select style="width: 240px; display: inline-block;"
                           [items]="store"
                           bindLabel="MDMC"
                           bindValue="MDID"
                           clearAllText [placeholder]="'选填'" [(ngModel)]="storeID" [notFoundText]="'无法找到'" typeToSearchText>
                </ng-select>
              </div>
            </div>
          </div>

          <!-- 销售组 -->
          <div apes-col apesSpan="8" class="bi-col">
            <div apes-row>
              <label apes-col apesSpan="8" style="text-align: right">
                <span>销售组</span>
              </label>
              <div apes-col apesSpan="16">
                <ng-select style="width: 240px; display: inline-block;"
                           typeToSearchText
                           [items]="sale"
                           multiple="true"
                           bindLabel="XSZMC"
                           bindValue="XSZID"
                           placeholder="选填，可多选"
                           [(ngModel)]="saleID"
                           [notFoundText]="'无法找到'">
                </ng-select>
              </div>
            </div>
          </div>

          <!-- 状态 -->
          <div apes-col apesSpan="8" class="bi-col" style="text-align: center">
            <div apes-row>
              <label apes-col apesSpan="6" apes-checkbox disabled [(ngModel)]="checkOne">未配货</label>
              <label apes-col apesSpan="6" apes-checkbox [(ngModel)]="checkTwo">已超时</label>
              <label apes-col apesSpan="8" apes-checkbox [(ngModel)]="checkThree">未询价要货</label>
            </div>
          </div>

          <!-- 商品 -->
          <div *ngIf="!showData" apes-col apesSpan="8" class="bi-col">
            <div apes-row>
              <label apes-col apesSpan="8" style="text-align: right">
                <span>商品</span>
              </label>
              <div apes-col apesSpan="16">
                <ng-select style="width: 240px; display: inline-block;"
                           typeToSearchText
                           [items]="productData"
                           bindLabel="name"
                           [loading]="contractLoading"
                           [typeahead]="contractinput$"
                           placeholder="选填"
                           [(ngModel)]="productList"
                           [notFoundText]="'无法找到'">
                </ng-select>
              </div>
            </div>
          </div>

          <!-- 供应商 -->
          <div *ngIf="!showData" apes-col apesSpan="8" class="bi-col">
            <div apes-row>
              <label apes-col apesSpan="8" style="text-align: right">
                <span>供应商</span>
              </label>
              <div apes-col apesSpan="16">
                <ng-select style="width: 240px; display: inline-block;"
                           clearAllText
                           [items]="supplier"
                           bindLabel="GYSMC"
                           bindValue="GYSID"
                           [placeholder]="'选填'" [notFoundText]="'无法找到'" typeToSearchText [(ngModel)]="supplierID">
                </ng-select>
              </div>
            </div>
          </div>

          <!-- 公司 -->
          <div *ngIf="!showData" apes-col apesSpan="8" class="bi-col">
            <div apes-row>
              <label apes-col apesSpan="8" style="text-align: right">
                <span>公司</span>
              </label>
              <div apes-col apesSpan="16">
                <ng-select style="width: 240px; display: inline-block;"
                           typeToSearchText
                           [items]="companyData"
                           multiple="true"
                           bindLabel="name"
                           bindValue="id"
                           placeholder="选填，可多选"
                           [(ngModel)]="companyList"
                           [notFoundText]="'无法找到'">
                </ng-select>
              </div>
            </div>
          </div>

          <div *ngIf="showMoreBtn" class="apes-query-showMore">
            <div *ngIf="showData" (click)="action_showMore()" class="apes-query-showMore-btn">
              <i apes-icon [apesType]="'double-right'" [apesRotate]="90"></i>
            </div>
            <div *ngIf="!showData" (click)="action_showMore()" class="apes-query-showMore-btn">
              <i apes-icon [apesType]="'double-left'" [apesRotate]="90"></i>
            </div>
          </div>

        </div>

      </apes-card>

      <apes-card [apesTitle]="'查询结果'">
        <!-- 左侧 数据展示 -->
        <div>
          <ag-grid-angular #grid
                           style="width: 100%;" [ngStyle]="{ height: height }" class="ag-theme-balham"
                           enableColResize="true"
                           enableSorting="true"
                           enableFilter="true"
                           suppressLoadingOverlay="true"
                           [modules]="modules"
                           [rowData]="rowData"
                           [gridOptions]="gridOptions"
                           [columnDefs]="columnDefs"
                           [pinnedBottomRowData]="pinnedBottomRowData"
                           [rowClassRules]="rowClassRules">
          </ag-grid-angular>
        </div>
      </apes-card>

    </div>
  </div>

</apes-content>



